<template>
 <h1>一个人的信息</h1>
 <h1>姓名: {{ name }}</h1>
 <h1>年龄: {{ age }}</h1>
 <h1>职业: {{ job.type }}</h1>
 <h1>薪水: {{ job.salary }}</h1>
<button @click="changeInfo">修改人的信息</button>
</template>

<script>
import { ref, onMounted } from 'vue'
export default {
  name: 'App',
  setup() {
    // 数据
    let name = ref('张三')
    let age = ref(18)
    let job = ref({
      type: '前端工程师',
      salary: '30K'
    })

    let test = ref(123)
    onMounted(() => {
      console.log(test)
    })

    // 方法
    function changeInfo() {
      name.value = '李四'
      age.value = 48
      job.value.type = '后端工程师'
      job.value.salary = '20K'
    }

    // 返回一个对象(常用)
    return {
      test,
      name: name,
      age: age,
      job: job,
      changeInfo: changeInfo
    }
  }
}
</script>
